<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">福州介绍</text>
    </view>
    
    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 封面图 -->
      <view class="cover-image">
        <image src="/static/index/fuzhou.jpg.svg" mode="aspectFill"></image>
      </view>
      
      <!-- 介绍文本区域 -->
      <view class="intro-text">
        <view class="paragraph">
          <text class="text">福州，一座被绿水青山温柔拥抱的千年古城，这里有着"有福之州"的美誉，更有着让人流连忘返的独特魅力。</text>
        </view>
        
        <view class="paragraph">
          <text class="text">漫步在三坊七巷的青石板路上，明清时期的古建筑静静诉说着往昔繁华；鼓山之上，登高远眺，整座城市美景尽收眼底；</text>
        </view>
        
        <view class="paragraph">
          <text class="text">闽江之畔，现代霓虹与古老街巷交相辉映，演绎着传统与现代的完美融合。</text>
        </view>
        
        <view class="paragraph">
          <text class="text">这里的美食更是让人回味无穷：一碗鲜香弹牙的福州鱼丸，一盅醇厚滋补的佛跳墙，还有那街头巷尾飘香的锅边糊，无不令人食指大动。</text>
        </view>
        
        <view class="paragraph">
          <text class="text">有福之州，有福同享——福州正以最美的姿态，期待您的到来，在这里书写属于您的独特记忆。</text>
        </view>
      </view>
      
      <!-- 特色景点展示 -->
      <view class="features">
        <text class="section-title">福州特色</text>
        
        <view class="feature-cards">
          <view class="feature-card">
            <text class="feature-icon">🏯</text>
            <text class="feature-name">三坊七巷</text>
          </view>
          
          <view class="feature-card">
            <text class="feature-icon">⛰️</text>
            <text class="feature-name">鼓山</text>
          </view>
          
          <view class="feature-card">
            <text class="feature-icon">🌊</text>
            <text class="feature-name">闽江</text>
          </view>
          
          <view class="feature-card">
            <text class="feature-icon">🍲</text>
            <text class="feature-name">福州美食</text>
          </view>
        </view>
      </view>
      
      <!-- 返回首页按钮 -->
      <view class="actions">
        <button class="back-btn" @click="goToHome">返回首页</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: rgba(26, 95, 122, 0.1);
}

.header {
  padding: 30rpx;
  text-align: center;
  background-color: #1A5F7A;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.content {
  flex: 1;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.cover-image {
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cover-image image {
  width: 100%;
  height: 100%;
}

.intro-text {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.paragraph {
  line-height: 1.8;
}

.text {
  font-size: 32rpx;
  color: #333;
}

.features {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  background-color: rgba(26, 95, 122, 0.05);
  border-radius: 15rpx;
  transition: all 0.3s;
}

.feature-card:active {
  transform: scale(0.98);
  background-color: rgba(26, 95, 122, 0.1);
}

.feature-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.feature-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.actions {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.back-btn {
  background-color: #1A5F7A;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  padding: 24rpx 80rpx;
  font-size: 36rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.back-btn:active {
  transform: scale(0.98);
  background-color: #154e66;
}
</style>